<template>
	<view>
		<view class="head">
			您已选择: {{name}}
		</view>
		<view class="tc" style="height: 120rpx;"></view>
		
		<view style="position: relative;">
			<scroll-view :scroll-with-animation="true" class="rsroll" :scroll-y="true" :show-scrollbar="false">
			<view class="one">
				<view :class="['one_info',floorCheck.id==item.id?'orange':'']" @click="setOneCheck(item)" v-for="(item,index) in floor" :key="index">
					{{item.name}}
				</view>
			</view>
			</scroll-view>
			<scroll-view v-show="two" :scroll-with-animation="true" class="rsroll one_box" :scroll-y="true" :show-scrollbar="false">
			<view class="one">
				<view :class="['one_info',layerCheck.id==item.id?'orange':'']" @click="setTwoCheck(item)" v-for="(item,index) in layer" :key="index">
					{{item.name}}
				</view>
			</view>
			</scroll-view>
			<scroll-view v-show="three" :scroll-with-animation="true" class="rsroll two_box" :scroll-y="true" :show-scrollbar="false">
			<view class="one">
				<view :class="['one_info',floorCheck.id==item.id?'orange':'']" @click="setThreeCheck(item)" v-for="(item,index) in room" :key="index">
					{{item.name}}
				</view>
			</view>
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				name:'',
				id:'',
				fid:'',
				lid:'',
				floor:[],
				floorCheck:{id:''},
			    two:false,
				layer:[],
				layerCheck:{id:''},
				three:false,
				room:[],
				roomCheck:{id:''},
				
			}
		},
		onLoad(e) {
			this.name=e.name;
			this.id=e.id;
			this.getFloor();
		},
		methods:{
			setThreeCheck(e){
				this.roomCheck=e;
			   	uni.$emit('floor',{floor:this.floorCheck,layer:this.layerCheck,room:this.roomCheck});
				uni.navigateBack();
			},
			setTwoCheck(e){
			   	this.layerCheck=e;
				this.lid=e.id;
				this.getRoom();
				this.three=true;
			},
			setOneCheck(e){
				this.floorCheck=e;
				this.fid=e.id;
				this.getlayer();
				this.two=true;
			},
			getRoom(){
				this.$get(this.$api.roomLists,{id:this.id,fid:this.fid,lid:this.lid},res=>{
					let data=res.data;
					if(data.code==1){
						this.room=data.data;
					}
				})
			},
			getlayer(){
				this.$get(this.$api.layerLists,{id:this.id,fid:this.fid},res=>{
					let data=res.data;
					if(data.code==1){
						this.layer=data.data;
					}
				})
			},
			getFloor(){
				this.$get(this.$api.floorLists,{id:this.id},res=>{
					let data=res.data;
					if(data.code==1){
						this.floor=data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color:#1677fe;
		font-size: 30rpx;
		color: white;
		height: 120rpx;
		line-height: 120rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.rsroll{
		height: calc(100vh - 120rpx);
		width:100%;
		background-color: white;
	}
	.one{
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.one_info{
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	.orange{
		color: #1677fe;
	}
	.one_box{
		position: absolute;
		width: 70%;
		top:0;
		right: 0;
		z-index: 10;
		box-shadow: -1px 0px 7px rgba(0,0,0,.1);
		transition: 400ms ease 0ms;
		transition-property: transform,opacity,left;
		transform-origin: 50% 50% 0;
	}
	.two_box{
		position: absolute;
		width: 40%;
		top:0;
		right: 0;
		z-index: 20;
		box-shadow: -1px 0px 7px rgba(0,0,0,.1);
		transition: 400ms ease 0ms;
		transition-property: transform,opacity,left;
		transform-origin: 50% 50% 0;
	}
</style>